{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b1f2d37210337a6da13672562b5a86bb79d20c9","tarball":"https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-0.35.0.tgz","fileCount":16,"integrity":"sha512-dwmWp5OhiAI3lIeelz7cesILGfkIBFxRBfhC+u4K95VH8tae0qbLXf8aSkVyRUN3rEMMy/Zl7q4AwQVxdtvhow==","signatures":[{"sig":"MEQCIHWQUDv/j7Cqzs5NLJ31coCbQFIsr93QUF1lOTtxmLraAiBHph16dlCXRkWsYJ5ZONwyZfNwU8VDW8mx0ZXluCtKSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mD9CRA9TVsSAnZWagAAWFgP/ifvljw6nKBzOoB38ZPc\nz0g3O/tA7mQFlGTGTfriNHBleygmlgwdBy7/eiXuZrjDWs0mC8qQ8aGt0V9l\n407LJNf9bvoKhOfkRT4u1KRFhvlvXt5Yf9AMde0T7gY7cDDMAAW3/lzZ/QeK\n/JfEc1Mh05ni7rpFq2obohvZKW0Ddf3pRvHSlj5biRras8/6XjI/T5loERw5\n/lJjWQL47lTVRgZjwljRlHSXfFaVI/iKuMj0dbWSgl1EKT4ZAJzxtIARL9rS\nwBBczLP0mdH0zVwoy+cL+qhxleC1pcyPFdRsdFxMqpQd0aWo4qp8JBeRP+zW\n7GuJwktH8rTfhyWMFmHAttajDbr67J+/0NOjVT+PcYdgBfXiI2Q/ckMSdXt2\nJ6TLYfQI2rrVpLJmmJftNkjNoNzHGqAZP5ZTGSnY/Pngs6rTQ2LORUtGBQdw\nMWrugWVgut0io3I86l0b1fPTKmrKAPjZbyyT0RFjw95Ue9iXq46+WDb1vlmT\ndi3yY4lpOKB3FeuitKQl4UvFDX51+QmgLYisrceqMN17J0ZYqAmFPy1chrka\n+GBvbQL3mvaZLzwI3hoDpAePsxMSNHsy5kSUObCuCEBIHhk4uBsNyNAyDBdY\nc6BG9SpTV3jBN71PVMxrjRHRRBO39lewWNlrYhk35l56lO/Ny8bzvkuuHImt\nkw+s\r\n=1gZ1\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/top-app-bar","readme":"\n\n# Top App Bar\n\n\n\nMDC Top App Bar acts as a container for items such as application title, navigation icon, and action items.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/top-app-bar\n```\n\n## Usage\n\n### HTML Structure\n\n```html\n\n```\n\nTop app bars can accommodate multiple action items on the opposite side of the navigation icon:\n\n```html\n\n```\n\nTop app bars can be fixed at the top of the page:\n\n```html\n\n```\n\nShort top app bars should only be used with one action item:\n\n```html\n\n```\n\nShort top app bars can be configured to always appear collapsed by applying the `mdc-top-app-bar--short-collapsed` before instantiating the component :\n\n```html\n\n```\n\n### JavaScript\n\n```js\n // Instantiation\n var topAppBarElement = document.querySelector('#topAppBar');\n var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(topAppBarElement);\n\n // Listen for navigation icon events\n topAppBarElement.addEventListener('MDCTopAppBar:nav', function () {\n // do something\n });\n```\n\n### CSS Classes\n\nClass | Description\n--- | ---\n`mdc-top-app-bar` | Mandatory.\n`mdc-top-app-bar--fixed` | Class used to style the top app bar as a fixed top app bar.\n`mdc-top-app-bar--prominent` | Class used to style the top app bar as a prominent top app bar.\n`mdc-top-app-bar--short` | Class used to style the top app bar as a short top app bar.\n`mdc-top-app-bar--short-collapsed` | Class used to indicate the short top app bar is collapsed.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar.\n`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons.\n`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar.\n`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color.\n`mdc-top-app-bar-short-border-radius($border-radius)` | Sets the `border-bottom-radius` property on the action item side. Used only for the short top app bar when collapsed.\n\n### `MDCTopAppBar`\n\nSee [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n#### `MDCTopAppBarAdapter`\n\nMethod Signature | Description\n--- | ---\n`hasClass(className: string) => boolean` | Checks if the root element of the component has the given className.\n`addClass(className: string) => void` | Adds a class to the root element of the component.\n`removeClass(className: string) => void` | Removes a class from the root element of the component.\n`registerNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native navigation icon element for a given event.\n`deregisterNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native navigation icon element for a given event.\n`notifyNavigationIconClicked() => void` | Emits a custom event `MDCTopAppBar:nav` when the navigation icon is clicked.\n`registerScrollHandler(handler) => void` | Registers a handler to be called when user scrolls. Our default implementation adds the handler as a listener to the window's `scroll` event.\n`deregisterScrollHandler(handler) => void` | Unregisters a handler to be called when user scrolls. Our default implementation removes the handler as a listener to the window's `scroll` event.\n`getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled from the top of the page.\n`getTotalActionItems() => number` | Gets the number of action items in the top app bar.\n\n### Events\n\nEvent Name | Event Data Structure | Description\n--- | --- | ---\n`MDCTopAppBar:nav` | None | Emits when the navigation icon is clicked.\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","top app bar","top-app-bar","topappbar"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web top app bar component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/animation":"^0.34.0","@material/elevation":"^0.35.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/top-app-bar_0.35.0_1524523260730_0.3172809009393318","host":"s3://npm-registry-packages"},"_id":"@material/top-app-bar@0.35.0","version":"0.35.0"}